<script setup>
import * as echarts from 'echarts';
import {onMounted, watch} from 'vue';
import axios from "axios";
import emitter from "./mitt.ts";
var myChart
var option;
let prop = defineProps({
  year: String
})
onMounted(
    () => {
      axios.get('http://127.0.0.1:5000/radar/'+prop.year).then(
          res => {
            let data = res.data
            let name = ["\u7269\u7406","\u5316\u5b66","\u751f\u7269","\u653f\u6cbb","\u5386\u53f2","\u5730\u7406"]
            let temp = []
            let sum = 0
            for (let i = 0; i < data.length; i++) {
              sum += data[i]
              temp.push({
                    value: data[i],
                    name: name[i]
                })
            }
            temp.forEach((item) => {
              item.value = Number(item.value/sum*100)
            })

            var chartDom = document.getElementById('rb');
            myChart = echarts.init(chartDom);
            option = {
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '0',
                left: 'center',
              },
              series: [
                {
                  name: '各科人数占比',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  padAngle: 5,
                  itemStyle: {
                    borderRadius: 10
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 40,
                      fontWeight: 'bold'
                    }
                  },

                  data: temp
                },

              ],
              title: {
                 text: '各科人数占比',
                left: 'center',
                top: '90%'
              }
            };

            option && myChart.setOption(option);
          }
      )


    }
)
watch(prop , (newVal, oldVal) => {
  if (Number(newVal.year) <= 24){
    axios.get('http://127.0.0.1:5000/radar/'+newVal.year).then((res) => {
      let data = res.data
      let name = ["\u7269\u7406","\u5316\u5b66","\u751f\u7269","\u653f\u6cbb","\u5386\u53f2","\u5730\u7406"]
      let temp = []
      let sum= 0
      for (let i = 0; i < data.length; i++) {
        sum+= data[i]
        temp.push({
          value: data[i],
          name: name[i]
        })
      }

      temp.forEach((item) => {
         item.value = Math.round(Number(item.value/sum*100))
      })
      option.series[0].data = temp
      option && myChart.setOption(option);
    })
  }else {
    alert("没有数据")
  }
})
emitter.on('change', (data) => {
  let p = prop.year+","+data.start+","+data.end
  axios.get("http://127.0.0.1:5000/c/"+p).then(
      (res) => {
        let label = ["物理","化学", "生物", "政治", "历史", "地理"]
        let te = new Map(Object.entries(res.data))
        let change = []
        let sum = 0
        label.forEach((item) => {
          sum += te.get(item)
          change.push({
            value:te.get(item),
            name:item
          })
        })

        change.forEach((item) => {
           item.value = Number(Math.round(item.value/sum*100))
        })
       option.series[0].data = change

        option && myChart.setOption(option);
      }
  )
})






</script>

<template>
<div id="rb"></div>
</template>

<style scoped>
#rb{
  width: 100%;
  height: 100%;
}
</style>